<script>
  import sheep from '@/sheep';

  export default {
    name: 'topBar',
    props: {
      titleList: {
        type: Array,
        default: [],
      },
      headerHeight: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        scrollLeft: 0,
        scrollInfoView: '',
        category: [
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
          { left: 0, width: 0, scrollTop: 0 },
        ],
        current: 0,
        headerScrollW: 0,
      };
    },
    computed: {
      activeStyle() {
        return {
          'width': '160rpx',
          'height': '80rpx',
          'color': '#FFFFFF',
          'background': '#CC8A00',
          'display': 'flex',
          'align-items': 'center',
          'justify-content': 'center',
          'overflow': 'hidden',
          'border-radius': '14rpx 14rpx 0 0',
          'font-size': '32rpx',
        };
      },
      inactiveStyle() {
        return {
          'width': '160rpx',
          'height': '80rpx',
          'color': '#292929',
          'background': '#FAE6BC',
          'display': 'flex',
          'align-items': 'center',
          'justify-content': 'center',
          'overflow': 'hidden',
          'border-radius': '14rpx 14rpx 0 0',
          'font-size': '32rpx',
        };
      },
      itemStyle() {
        return {
          'padding': 0,
          'border-radius': '14rpx 14rpx 0 0',
          'font-weight': '500',
          'width': '160rpx',
          'height': '80rpx',
          'line-height': '80rpx',
          'font-size': '32rpx',
        };
      },
    },
    mounted() {
      uni.$on('contentScroll', this.contentScroll);
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);

        query.select('.surnameOrigin_scroll').boundingClientRect(data => {
          // 拿到 scroll-view 组件宽度
          this.headerScrollW = data.width;
        }).exec();

        query.selectAll('.surname-item').boundingClientRect(data => {
          let dataLen = data.length;
          for (let i = 0; i < dataLen; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            this.category[i].left = data[i].left ? data[i].left : 0;
            //  scroll-view 子元素组件宽度
            this.category[i].width = data[i].width;
          }
        }).exec();
      });
      uni.$on('allTop', (res) => {
        this.category[res.index].scrollTop = res.top - this.headerHeight;
      });
    },
    methods: {
      goPath(e) {
        console.log(e);
        this.current = Number(e.index);
        switch (e.index) {
          case 0:
            uni.$emit('goPath', 'surnameComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 1:
            uni.$emit('goPath', 'originComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 2:
            uni.$emit('goPath', 'transferComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 3:
            uni.$emit('goPath', 'countyComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 4:
            uni.$emit('goPath', 'coupletComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 5:
            uni.$emit('goPath', 'allusionComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 6:
            uni.$emit('goPath', 'family_traditionComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 7:
            uni.$emit('goPath', 'ancestral_hallComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 8:
            uni.$emit('goPath', 'generationComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 9:
            uni.$emit('goPath', 'genealogyComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 10:
            uni.$emit('goPath', 'celebrityComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
          case 11:
            uni.$emit('goPath', 'claninsigniaComponents');
            setTimeout(() => {
              uni.$emit('goPath', '');
            }, 100);
            return;
        }
      },
      contentScroll() {
        console.log(this.category);
        let arr = [];
        this.category.forEach((item, index) => {
          if (item.scrollTop < 0) {
            arr.push(index);
          }
        });
        if (arr.length > 0) {
          this.current = arr[arr.length - 1];
          this.scrollLeft = this.category[arr[arr.length - 1]].left - this.headerScrollW / 2 + this.category[arr[arr.length - 1]].width / 2;
        } else {
          this.current = 0;
          this.scrollLeft = this.category[0].left - this.headerScrollW / 2 + this.category[0].width / 2;
        }
      },
    },
  };
</script>

<template>
  <view class="surnameOrigin_scroll" scroll-x enable-flex :scroll-left="scrollLeft">
    <!--      <view class="surname-item flex align-center justify-center" v-for="(item, index) in titleList" :key="index"-->
    <!--            :style="{-->
    <!--        background: index != current ? '#FFEDC7' : '#FF4206',-->
    <!--      }"-->
    <!--            @click="goPath(item.index)">-->
    <!--        <view class="surname-item_list flex align-center justify-center">-->
    <!--          <view class="surname-item-name" :style="{-->
    <!--            color: index == current ? '#FFFFFF' : '#4B4B4B',-->
    <!--          }">{{ item.name }}-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <su-tabs id="suTabs" class="suTabs" :class="`tabs_${current}`"
             :list="titleList"
             :current="current"
             lineColor="transparent"
             :scrollable="true"
             :itemStyle="itemStyle"
             lineWidth="62rpx"
             :activeStyle="activeStyle"
             :inactiveStyle="inactiveStyle"
             backgroundAll="#FAE6BC"
             @change="goPath"
    />
  </view>
</template>

<style scoped lang="scss">
  .surnameOrigin_scroll {
    width: 750rpx;
    padding: 25rpx 0;
    white-space: nowrap;


    .surname-item {
      margin: 0 10rpx;
      width: 168rpx;
      height: 52rpx;
      background: #FAE6BC;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      display: inline-block;

      .surname-item_list {
        width: 168rpx;
        height: 52rpx;

        .surname-item-name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }
    }
  }

  .suTabs {
    ::v-deep .u-tabs {
      background: transparent !important;
      border: none !important;
    }

    /* #ifdef H5 */
    background: transparent !important;
    border: none !important;
    /* #endif */
  }

  .tabs {
    @for $value from 1 through 750 {
      &_#{$value} {
        ::v-deep .u-tabs__wrapper__nav__item-#{$value} {
          background: #CC8A00;
        }
      }
    }
  }

  :deep(.u-tabs__wrapper__nav__item) {
    padding: 0;
  }

  :deep(.u-tabs) {
    background: transparent !important;
  }
</style>